var vm = new Vue({
  el: '#app',
  data: {
    page: 0,
    imgUrl: '',
    imgId: '',
    showPop1: false,
    showLoading: false,
    showResult: false,
    resultImgUrl: '',
    // 题目
    questions: [{
        question: '您平时大约几点休息？',
        options: [
          'A.10点~11点',
          'B.11点~12点',
          'C.12点以后'
        ],
        answer: '',
      },
      {
        question: '您平时有卸妆的习惯吗？',
        options: [
          'A.很少',
          'B.化妆了一定卸',
          'C.不化妆也坚持卸'
        ],
        answer: ''
      },
      {
        question: '您的年龄是？',
        options: [
          'A.18岁~25岁',
          'B.25岁~35岁',
          'C.35岁以上'
        ],
        answer: ''
      }
    ],
    // 渲染的题目
    renderQs: [],
    // 记录回答的序号
    index: 0
  },
  methods: {
    toPage2: function () {
      this.page = 2
      this.$nextTick(function () {
        this.renderPage2Animat()
      })
    },
    upImg: function () {
      var _this = this
      var formData = new FormData()
      formData.append('file', this.$refs.inpFile.files[0])
      formData.append('key', 'Gn1xVdBiTClSSHKZifg0pTQSU5XGagWO')
      $.ajax({
        url: 'http://ydnshop.hepulanerp.com/sucai_t/public/index.php/post/post/uploadFile',
        type: 'POST',
        processData: false,
        contentType: false,
        dataType: "json",
        data: formData,
        success: function (res) {
          console.log(res)
          if (res.status === 200 && res) {
            _this.imgUrl = res.info.url
            _this.imgId = res.info.id
          }
        }
      })
    },
    toPage3: function () {
      if (this.imgUrl === '') {
        alert('请先上传照片')
        return
      }
      this.page = 3

      this.$nextTick(function () {
        this.renderPage3Animat()
      })
    },
    toPop1: function () {
      this.renderQs.push(this.questions.shift())
      this.showPop1 = true
    },
    chooseOption(index, option) {
      var first = false
      if (this.renderQs[index].answer === '') {
        first = true
      }
      this.renderQs[index].answer = option
      this.index = index
      if (first) {
        this.$nextTick(function () {
          this.$refs.cvs_box.scrollTop = this.$refs.cvs_box.scrollHeight
        })
      }
    },
    afterAnswer: function (el) {
      if (this.questions.length > 0 && this.renderQs.length === this.index + 1) {
        this.renderQs.push(this.questions.shift())
      }
      this.$nextTick(function () {
        this.$refs.cvs_box.scrollTop = this.$refs.cvs_box.scrollHeight
      })
    },
    toPop2: function () {
      if (this.questions.length !== 0 || this.renderQs[this.renderQs.length - 1].answer === '') {
        alert('请先完成问题')
        return
      }
      this.showPop1 = false
      this.showLoading = true
      var _this = this
      var answer = _this.renderQs.map(item => item.answer)
      console.log(answer)
      console.log(_this.imgUrl)
      $.ajax({
        url: 'http://hfc.suoluomei.com/hpl/index.php?s=/Weixin/questionnaire/setMessage',
        type: 'POST',
        dataType: 'json',
        data: {
          imgUrl: _this.imgUrl,
          answer: answer
        },
        success: function (res) {
          if (res.status == 1) {
            _this.resultImgUrl = res.imgurl
            _this.showLoading = false
            _this.showResult = true

            var img = new Image()
            img.src = res.imgurl
          } else {
            alert('网络异常')
          }
        },
        error: function (err) {
          console.log(err)
        }
      })
    },
    toPage4: function () {
      this.page = 4
      this.$refs.posterImg.src = this.resultImgUrl
      // this.$nextTick(function () {
      //   this.initCanva()
      // })
    },
    again: function () {
      window.location.reload()
    },
    renderposter: function () {
      // console.log(this.$refs.poster)
      // var _this = this
      // html2canvas(this.$refs.poster, {
      //   allowTaint: true,
      //   useCORS: true,
      //   scale: 3
      // }).then(function (canvas) {
      //   _this.page = -1
      //   document.getElementById('app').appendChild(canvas)
      //   alert('生成成功，请长按保存。')
      // })
      alert('生成成功，请长按保存。')
    },
    /*
    ctx:context
    str:要绘制的字符串
    X:绘制字符串起始x坐标
    Y:绘制字符串起始y坐标
    width: 绘制宽度
    lineHeight:字行高，自己定义个值即可
    */
    // canvasTextAutoLine: function (ctx, str = '', X = 0, Y = 0, width = 300, lineHeight) {
    //   var j = 0
    //   var arrStr = []
    //   lineHeight = lineHeight || ctx.font.split('px')[0]
    //   for (var i = 0; i < str.length; i++) {
    //     if (ctx.measureText(str.slice(j, i)).width >= width) {
    //       arrStr.push(str.slice(j, i))
    //       j = i
    //     }
    //   }
    //   arrStr.push(str.slice(j))
    //   arrStr.map(function (value, index) {
    //     ctx.fillText(value, X, Y + index * lineHeight)
    //   })
    // },
    // initCanva: function () {
    //   var _this = this
    //   var cvs = this.$refs.cvs
    //   var ctx = cvs.getContext('2d')
    //   var img = new Image()
    //   img.src = './H5/04.png'
    //   img.onload = function (e) {
    //     var ratio = this.width / window.innerWidth
    //     cvs.width = this.width
    //     cvs.height = this.height

    //     var lineheight = 45
    //     var fonts = [{
    //         c: '23岁',
    //         x: 610,
    //         y: 410
    //       },
    //       {
    //         c: 'wow~你拥有自然的肤色，给人天然健康的感觉。同时，Q弹的脸颊有着满满的胶原蛋白呢！脸颊还有点点充满国际贵族气息的小雀斑，简直是小禾的梦中情Girl了~',
    //         x: 170,
    //         y: 580,
    //         width: 500
    //       }
    //     ]

    //     var font1 = ['现在你的肌肤已处于18~25岁', '{禾·防御}阶段满满的生命力~',
    //       '但抗氧化工作也要提前做好哦！', '平日注意避免熬夜，做好防晒措施',
    //       '保护皮肤不受太阳、风和寒冷天气的伤害', '坚持卸妆是个好习惯',
    //       '但注意卸妆产品的选择，防止过度清洁'
    //     ]

    //     font1.forEach(function (value, index) {
    //       fonts.push({
    //         c: value,
    //         x: 50,
    //         y: 1000 + index * 55,
    //       })
    //     })

    //     ctx.drawImage(this, 0, 0, cvs.width, cvs.height)

    //     var grd = ctx.createLinearGradient(0, 0, cvs.width, 0)
    //     grd.addColorStop(0.0, "#02e0f9")
    //     grd.addColorStop(1.0, "#24fda1")

    //     ctx.save()
    //     ctx.fillStyle = grd
    //     ctx.textAlign = 'left'
    //     ctx.textBaseline = 'top'
    //     ctx.font = 32 + 'px serif'
    //     fonts.forEach(function (i) {
    //       _this.canvasTextAutoLine(ctx, i.c, i.x, i.y, i.width || Infinity, i.lineheight || lineheight)
    //     })
    //     ctx.restore()

    //     _this.$refs.posterImg.src = cvs.toDataURL("image/png")
    //   }
    // },
    renderPage1Animat: function () {
      var _this = this
      var wave = bodymovin.loadAnimation({
        container: $('#p1_wave')[0], // the dom element that will contain the animation
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: './H5/1/wave.json' // the path to the animation json
      })

      var circle = bodymovin.loadAnimation({
        container: $('#p1_circle')[0],
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: './H5/common/circle/circle.json'
      })

      var light = bodymovin.loadAnimation({
        container: $('#p1_light')[0],
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: './H5/common/light/light.json'
      })

      var title1 = bodymovin.loadAnimation({
        container: $('#p1_title1')[0],
        renderer: 'svg',
        loop: false,
        autoplay: true,
        path: './H5/1/title1.json'
      })

      title1.addEventListener('complete', () => {
        var title2 = bodymovin.loadAnimation({
          container: $('#p1_title2')[0],
          renderer: 'svg',
          loop: true,
          autoplay: true,
          path: './H5/1/title2.json'
        })

        title2.addEventListener('data_ready', () => {
          title1.destroy()
        })
      })

      var topdot = bodymovin.loadAnimation({
        container: $('#p1_topdot')[0],
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: './H5/1/topdot.json'
      })

      var t2018 = bodymovin.loadAnimation({
        container: $('#p1_t2018')[0],
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: './H5/1/2018/2018.json'
      })
    },
    renderPage2Animat: function () {
      bodymovin.destroy()

      var circle = bodymovin.loadAnimation({
        container: $('#p2_circle')[0],
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: './H5/common/circle/circle.json'
      })

      var path = bodymovin.loadAnimation({
        container: $('#p2_path')[0],
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: './H5/common/path.json'
      })

      var title = bodymovin.loadAnimation({
        container: $('#p2_title')[0],
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: './H5/common/title/title.json'
      })

      var upload = bodymovin.loadAnimation({
        container: $('#p2_upload')[0],
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: './H5/2/upload/upload.json'
      })

      var wave = bodymovin.loadAnimation({
        container: $('#p2_wave')[0],
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: './H5/common/dotwave/dotwave.json'
      })

      var light = bodymovin.loadAnimation({
        container: $('#p2_light')[0],
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: './H5/common/light/light.json'
      })
    },
    renderPage3Animat: function () {
      bodymovin.destroy()

      var circle = bodymovin.loadAnimation({
        container: $('#p3_circle')[0],
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: './H5/common/circle/circle.json'
      })

      var path = bodymovin.loadAnimation({
        container: $('#p3_path')[0],
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: './H5/common/path.json'
      })

      var title = bodymovin.loadAnimation({
        container: $('#p3_title')[0],
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: './H5/common/title/title.json'
      })

      var wave = bodymovin.loadAnimation({
        container: $('#p3_wave')[0],
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: './H5/common/dotwave/dotwave.json'
      })

      var light = bodymovin.loadAnimation({
        container: $('#p3_light')[0],
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: './H5/common/light/light.json'
      })

      var email = bodymovin.loadAnimation({
        container: $('#p3_email')[0],
        renderer: 'svg',
        loop: false,
        autoplay: true,
        path: './H5/3/email/p3_email.json'
      })
    },
    loadRessource() {
      var _this = this
      var loader = new ResLoader({
        resources: [
          'H5/page1.png',
          'H5/page2.png',
          'H5/page3.png',
          'H5/popBg1.png',
          'H5/border.png',
          'H5/xiaohe39.png',
          'H5/xiongben.png',
          'H5/pop1.png',
          'H5/pop2.png',
          'H5/common/circle/images/__2_2x.png',
          'H5/common/light/images/___2x.png',
          'H5/common/title/images/img_0.png',
          'H5/common/title/images/img_1.png',
          'H5/common/title/images/img_2.png',
          'H5/common/dotwave/images/____2x.png',
          'H5/1/images/__2_2x.png',
          'H5/1/images/__1_2x.png',
          'H5/1/images/_______2x.png',
          'H5/1/images/______2x.png',
          'H5/1/images/___2x.png',
          'H5/1/images/___2x_0.png',
          'H5/1/images/____2x.png',
          'H5/1/2018/images/2018_2x.png',
          'H5/2/upload/images/___2x.png',
          'H5/2/upload/images/_____2x.png',
          'H5/3/email/images/img_0.png',
          'H5/3/email/images/img_1.png'
        ],
        onStart: function (total) {
          console.log('start:' + total);
        },
        onProgress: function (current, total) {
          console.log(current + '/' + total);
          var percent = current / total * 100;
          $('.progressbar').css('width', percent + '%');
        },
        onComplete: function (total) {
          _this.page = 1
          _this.$nextTick(function () {
            _this.renderPage1Animat()
          })
        }
      });

      loader.start();
    }
  },
  mounted: function () {
    this.loadRessource()
    // this.renderPage1Animat()
    setTimeout(() => {
      console.log(window.innerHeight)
    }, 5000);
  }
})
